<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('编辑')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="600px" @close='close'>
    <el-table size='mini' ref="multipleTable" :data="onlineList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="ip" align='center' :label="$t('IP地址')"></el-table-column>
      <el-table-column align='center' width='100' fixed="right" :label="$t('操作')">
        <template slot-scope="scope">
          <el-button type="danger" plain size="mini" @click="deleteData(scope.row)"  :class="'del' + (scope.$index + 1)">{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" class="addClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getUserInfo, delUserIp } from '@/api/user/online'
export default {
  name: 'OnlineDialog',
  data () {
    return {
      dialogVisible: false,
      onlineList: [],
      info: null
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      getUserInfo({ name: data.name }).then(res => {
        if (res.status === 0) {
          this.info = res.info[0]
          this.onlineList = res.info[0]['map-info']
        }
      })
    },
    deleteData (row) {
      this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        delUserIp({ name: this.info.name, ip: row.ip }).then(res => {
          if (res.status === 0) {
            this.$message({
              message: this.$t('删除成功'),
              type: 'success'
            })
            this.$parent.listData()
            getUserInfo({ name: this.info.name }).then(res => {
              if (res.status === 0) {
                this.info = res.info[0]
                this.onlineList = res.info[0]['map-info']
                if (!this.onlineList || (this.onlineList && this.onlineList.length < 1)) {
                  this.close()
                }
              }
            })
          }
        })
      })
    },
    close () {
      this.dialogVisible = false
      this.onlineList = []
      this.info = null
    }
  }
}
</script>
